<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<view class="wrap">
			<view class="header-bg"></view>
			<view class="header">
				<view class="header-left">
					<view class="my-earn-box">
						<view class="my-earn-title">我的收益</view>
						<view class="can-withdraw">可提现:</view>
						<view class="withdraw-box">
							{{$store.state.user.userInfo.money}}元
							<button class="withdraw-btn" :plain="true" @click="navTo('./withdraw')">提现</button>
						</view>
					</view>
				</view>
				<view class="header-right">
					<u-table border-color="#f8ded9" color="#f8ded9" bg-color="transparent;">
						<u-tr>
							<u-th>
								<view class="u-th-box">
									{{$store.state.user.userInfo.roleName}}
									<button class="upgrade-btn" :plain="true" @click="openVipIsShow=true">
										升级
									</button>
								</view>
							</u-th>
						</u-tr>
						<u-tr>
							<u-td class="u-td-left">
								直邀好友
								<view> {{$store.state.user.userInfo.dirPercent}}%</view>
							</u-td>
							<u-td class="u-td-right">
								间邀好友
								<view> {{$store.state.user.userInfo.indirPercent}}%</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>

			<view class="main-panel">
				<u-notice-bar mode="horizontal" :list="noticeList" style="padding: 0upx 20upx;"></u-notice-bar>
				<view class="panel-header">
					<u-cell-item title="我的好友:0人" value="详情" @click="navTo('./teamList')" :border-bottom="false"
						hover-class="none" :title-style="titleStyle" style=" padding: 10upx 0upx; ">
					</u-cell-item>
					<u-row class="my-team-panel" justify="center" gutter="16">
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value">
									{{$store.state.user.userInfo.directlyInviteCount+
									$store.state.user.userInfo.indirectlyInviteCount}}
								</view>
								<view>人</view>
							</view>
							<view> 共邀请</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value">
									{{$store.state.user.userInfo.directlyInviteCount}}
								</view>
								<view>人</view>
							</view>
							<view> 直邀好友</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value">
									{{$store.state.user.userInfo.indirectlyInviteCount}}
								</view>
								<view>人</view>
							</view>
							<view> 间邀好友</view>
						</u-col>
					</u-row>

				</view>
				<button class="yaoqing_btn" @click="navTo('./share2')">邀请好友</button>
				<view class="panel-header">
					<u-cell-item :title="'我的佣金:'+teamInfo.totalEarn+'元'" value="详情" @click="navTo('./moneyRecord')"
						:border-bottom="false" hover-class="none" :title-style="titleStyle"
						style=" padding: 10upx 0upx; ">
					</u-cell-item>
					<u-row class="my-earn-panel" justify="center" gutter="16">
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.totalEarn}}
								</view>
								<view>元</view>
							</view>
							<view> 总佣金</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.vipEarn}}</view>
								<view>元</view>
							</view>
							<view> 会员佣金</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.goldEarn}}</view>
								<view>元</view>
							</view>
							<view> 积分佣金</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.agentEarn}}
								</view>
								<view>元</view>
							</view>
							<view> 代理佣金</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.addEarn}}
								</view>
								<view>元</view>
							</view>
							<view> 广告佣金</view>
						</u-col>
						<u-col span="4" text-align="center">
							<view class="des-box">
								<view class="des-value"> {{teamInfo.inviteEarn}}
								</view>
								<view>元</view>
							</view>
							<view> 邀请奖励</view>
						</u-col>
					</u-row>
				</view>
				<u-line></u-line>
			</view>
			<u-popup v-model="openVipIsShow" border-radius="30" mode="bottom" :closeable="true">
				<buy-agent></buy-agent>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import buyAgent from '@/components/my/buyAgent.vue'
	export default {
		data() {
			return {
				openVipIsShow: false, //开通会员弹窗是否显示
				withdrawConfig: {}, //提现配置
				noticeList: ['本平台稳定运营三年，平台稳定长久，请放心使用！'],
				titleStyle: {
					"color": "#303133"
				},
				teamInfo: {}
			};
		},
		components: {
			buyAgent
		},
		//页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			this.$store.dispatch('getUserInfo')
		},
		onLoad() {
			this.getTeamInfo()
		},
		methods: {
			getTeamInfo() {
				this.$api.api('user.teamInfo')
					.then(res => {
						if (res.code == 200) {
							this.teamInfo = res.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},

		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		background: #f8f8f8;
	}



	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
	}



	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		text-align: center;
		z-index: 0;

		.header-bg {
			width: 100%;
			height: 460upx;
			position: absolute;
			background-color: #1a1b1d;
			border-radius: 0upx 0upx 30upx 30upx;
			z-index: -1;
		}


		.header {
			display: flex;
			margin-top: 30upx;

			.header-left {
				display: flex;
				width: 50%;

				.my-earn-box {
					width: 100%;
					text-align: left;
					padding-left: 40upx;

					.my-earn-title {
						font-size: 50upx;
						color: #f8ded9;
						padding-top: 20up;
						margin-top: 30upx;
					}

					.can-withdraw {
						font-size: 28upx;
						color: #f8ded9;
					}

					.withdraw-box {
						font-size: 32upx;
						color: #f8ded9;
						display: flex;
					}
				}

				.withdraw-btn {
					font-size: 28upx;
					color: #f8ded9;
					width: 120upx;
					height: 52upx;
					margin-left: 20upx;
					line-height: 44upx;
					border-width: 2upx;
					border-color: #f8ded9;
				}
			}

			.header-right {
				width: 50%;
				padding-right: 40upx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;


				.u-table {
					width: 86%;
					margin-top: 40upx;
					border-radius: 10upx;

					.u-th {
						border-radius: 10upx 10upx 0upx 0upx;
						background-color: transparent;
						color: #f8ded9;
						text-align: center;

						.u-th-box {
							display: flex;
							justify-content: center;
						}
					}

					.u-td-left {
						border-radius: 0upx 0upx 0upx 10upx;
					}

					.u-td-right {
						border-radius: 0upx 0upx 10upx 0upx;
					}
				}

				.upgrade-btn {
					margin: 1upx 10upx;
					font-size: 28upx;
					color: #f8ded9;
					width: 120upx;
					height: 38upx;
					line-height: 38upx;
					border-width: 2upx;
					border-color: #f8ded9;
				}
			}

		}

		.yaoqing_btn {
			line-height: 80upx;
			margin: 30upx 20upx 15upx 20upx;
			height: 85upx;
			color: #FFFFFF;
			background: #FD6416;
			background-size: 100%;
		}

		.main-panel {
			padding-top: 20upx;
			margin: 60upx 40upx 20upx 40upx;
			background-color: #FFFFFF;
			box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
			border-radius: 20upx;

			.panel-header {
				flex-direction: row;
				padding: 20upx;
				text-align: left;
			}
		}




		.my-team-panel {
			height: 160upx;
			background-color: #f8f8f8;
		}

		.my-earn-panel {
			height: 320upx;
			background-color: #f8f8f8;
		}

		.des-box {
			color: #ca2e25;
			display: flex;
			align-items: center;
			justify-content: center;

			.des-value {
				font-size: 54upx;
				padding-bottom: 15upx;
			}
		}
	}
</style>
